<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    @cancel="handleCancel"
    @ok="handleCancel"
    :width="800"
    centered
    title="统计图表"
  ><echartsView :loading="loading" :options="options"></echartsView
  ></a-modal>
</template>

<script>
import { echartsView } from '@/components'
export default {
  components: {
    echartsView
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.$nextTick(() => {
          this.fetchData()
        })
      }
    }
  },
  data () {
    return {
      loading: false,
      options: {}
    }
  },
  methods: {
    fetchData () {
      this.loading = true
      setTimeout(() => {
        this.options = {
          title: {
            text: '贵阳市历年公租房实物分配情况',
            textAlign: 'center',
            top: '6%',
            left: '50%'
          },
          // 提示框组件
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          // 图例组件
          legend: {
            data: ['建设套数', '已分配', '未分配'],
            top: '14%'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '30%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '套数',
              interval: 500,
              axisLabel: {
                formatter: '{value} 套'
              }
            }
          ],
          series: [
            {
              name: '建设套数',
              type: 'bar',
              data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
            },
            {
              name: '已分配',
              type: 'bar',
              data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            },
            {
              name: '未分配',
              type: 'bar',
              data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            }
          ]
        }
        this.loading = false
      }, 1000)
    },
    hanldeAfterClose () {},
    close () {
      this.$emit('update:visible', false)
      Object.assign(this.$data, this.$options.data.call(this))
    },
    handleCancel () {
      this.close()
    }
  }
}
</script>
<style scoped>
</style>
